import React, { FC, useMemo, useState, useEffect, useCallback } from 'react';
import { groupBy } from 'lodash'
import { PlaneTrip, Plane } from '../types/plane.type';
import { getTripsByPlaneId, getAllPlaneTrip } from '@apis/index';
import { SchedulingGrid } from './SchedulingGrid';
import dayjs from 'dayjs';
import './Scheduling.css';

type Props = {
    selectedPlane?: Plane;
}

export const Grounding: FC<Props> = ({ selectedPlane }) => {
    const [trips, setTrips] = useState<PlaneTrip[]>([]);
    const init = useCallback(() => {
        if (!selectedPlane) {
            getAllPlaneTrip().then(setTrips);
            return;
        }
        getTripsByPlaneId(selectedPlane?.id!).then(setTrips)
    }, [selectedPlane])
    useEffect(() => {
        init();
    }, [init]);
    const formatedTrips = useMemo(() => {
        const tripsMap = groupBy(trips, 'plane.id');
        const planeIds = Object.keys(tripsMap);
        const formatTripsMap = planeIds.reduce((acc, cur) => {
            const planeTrips = tripsMap[cur];
            acc[cur] ??= [];
            if (planeTrips.length === 1) {
                acc[cur].push({
                    ...planeTrips[0],
                    destination: planeTrips[0].origin,
                    departuretime: dayjs().startOf('d').format("YYYY-MM-DD HH:mm:ss"),
                    arrivetime: planeTrips[0].departuretime,
                });
                acc[cur].push({
                    ...planeTrips[0],
                    destination: planeTrips[0].destination,
                    departuretime: planeTrips[0].arrivetime,
                    arrivetime: dayjs().endOf('d').format("YYYY-MM-DD HH:mm:ss")
                })
            } else {
                acc[cur] = planeTrips.reduce((acc, cur, index, arr) => {
                    if (index === 0) {
                        acc.push({
                            ...cur,
                            destination: cur.origin,
                            departuretime: dayjs().startOf('d').format("YYYY-MM-DD HH:mm:ss"),
                            arrivetime: cur.departuretime
                        })
                    } else {
                        acc.push({
                            ...cur,
                            destination: cur.origin,
                            departuretime: arr[index - 1].arrivetime,
                            arrivetime: cur.departuretime
                        })
                    }
                    if (index === arr.length - 1) {
                        acc.push({
                            ...cur,
                            destination: cur.destination,
                            departuretime: cur.arrivetime,
                            arrivetime: dayjs().endOf('d').format("YYYY-MM-DD HH:mm:ss")
                        })
                    }
                    return acc;
                }, [] as PlaneTrip[]);

            }
            return acc;

        }, {} as Record<string, PlaneTrip[]>);
        return {
            tripsMap: formatTripsMap,
            planeIds
        }
    }, [trips])
    return <div className='schedulingWrapper'>
        <SchedulingGrid formatedTrips={formatedTrips} init={init} type="ground" />
    </div>
}
